<!--
 * @Description: 全部商品页面组件(包括全部商品,商品分类,商品搜索)
 * @Author: hai-27
 * @Date: 2020-02-07 16:23:00
 * @LastEditors: hai-27
 * @LastEditTime: 2020-03-08 12:11:13
 -->
<template>
	<div class="goods" id="goods" name="goods">
		<!-- 面包屑 -->
		<div class="breadcrumb">
			<el-breadcrumb separator-class="el-icon-arrow-right">
				<el-breadcrumb-item to="/">首页</el-breadcrumb-item>
				<el-breadcrumb-item>全部商品</el-breadcrumb-item>
				<el-breadcrumb-item v-if="search">搜索</el-breadcrumb-item>
				<el-breadcrumb-item v-else>分类</el-breadcrumb-item>
				<el-breadcrumb-item v-if="search">{{ search }}</el-breadcrumb-item>
			</el-breadcrumb>
		</div>
		<!-- 面包屑END -->
		
		<!-- 分类标签 -->
		<div class="nav" style="height: 60px">
			<div class="product-nav">
				<ul class="nav-list J_navMainList clearfix">
					<li id="" class="nav-category">
						<a>
							<span class="text">全部分类</span>
						</a>
					</li>
					<el-tabs v-model="activeName" type="card">
						<el-tab-pane
							v-for="item in categoryList"
							:key="item.id"
							:label="item.name"
							:name="''+item.id"
						/>
					</el-tabs>
				</ul>
<!--				<li id="" class="nav-category">
					
					
					
					<el-menu-item index="/category">
						<span class="text">分类</span>
					</el-menu-item>
					<div class="menu-list-wrap">
						<ul class="menu_list">
							<li class="menus_item" v-for="(item, index) in menuDataTest" :key="index"
								@mouseover="showSubmenu(item, index)" @mouseout="hideSubmenu(index)">
								<div class="menu_item_name">{{ item.name }}</div>
								<div class="secondary-menu"
									 v-show="item.columns.length > 0 && showSubMenu && activeSubmenu === index">
									<div class="menu-wrap" v-for="(column, columnIndex) in item.columns"
										 :key="columnIndex">
										<span>{{ column.name }}</span>
									</div>
								</div>
							</li>
						</ul>
					</div>
				</li>-->
<!--				<el-tabs v-model="activeName" type="card">
					<el-tab-pane
						v-for="item in categoryList"
						:key="item.id"
						:label="item.name"
						:name="''+item.id"
					/>
				</el-tabs>-->
			</div>
		</div>
		<!-- 分类标签END -->
		
		<!-- 主要内容区 -->
		<div class="main">
			<div class="list">
				<MyList :list="product" v-if="product.length>0"></MyList>
				<div v-else class="none-product">抱歉没有找到相关的商品，请看看其他的商品</div>
			</div>
			<!-- 分页 -->
			<div class="pagination">
				<el-pagination
					background
					layout="prev, pager, next"
					:page-size="pageSize"
					:total="total"
					@current-change="currentChange"
				></el-pagination>
			</div>
			<!-- 分页END -->
		</div>
		<!-- 主要内容区END -->
	</div>
</template>
<script>
	export default {
		data() {
			return {
				categoryList: "", //分类列表
				categoryID: [], // 分类id
				product: "", // 商品列表
				productList: "",
				total: 0, // 商品总量
				pageSize: 15, // 每页显示的商品数量
				currentPage: 1, //当前页码
				activeName: "-1", // 分类列表当前选中的id
				search: "", // 搜索条件
				menuDataTest:"",
				menuTimer: null, // 定时器
				activeSubmenu: null, // 当前要展示的菜单
				showSubMenu: false, // 控制二级菜单显示隐藏值
				
			};
		},
		created() {
			// 获取分类列表
			this.getCategory();
			this.getCategory23();
		},
		activated() {
			this.activeName = "-1"; // 初始化分类列表当前选中的id为-1
			this.total = 0; // 初始化商品总量为0
			this.currentPage = 1; //初始化当前页码为1
			// 如果路由没有传递参数，默认为显示全部商品
			if (Object.keys(this.$route.query).length == 0) {
				this.categoryID = [];
				this.activeName = "0";
				return;
			}
			// 如果路由传递了categoryID，则显示对应的分类商品
			if (this.$route.query.categoryID != undefined) {
				this.categoryID = this.$route.query.categoryID;
				if (this.categoryID.length == 1) {
					this.activeName = "" + this.categoryID[0];
				}
				return;
			}
			// 如果路由传递了search，则为搜索，显示对应的分类商品
			if (this.$route.query.search != undefined) {
				this.search = this.$route.query.search;
			}
		},
		watch: {
			// 监听点击了哪个分类标签，通过修改分类id，响应相应的商品
			activeName: function (val) {
				if (val == 0) {
					this.categoryID = [];
				}
				if (val > 0) {
					this.categoryID = [Number(val)];
				}
				// 初始化商品总量和当前页码
				this.total = 0;
				this.currentPage = 1;
				// 更新地址栏链接，方便刷新页面可以回到原来的页面
				this.$router.push({
					path: "/goods",
					query: {category3Id: this.categoryID}
				});
			},
			// 监听搜索条件，响应相应的商品
			search: function (val) {
				if (val != "") {
					this.getProductBySearch(val);
				}
			},
			// 监听分类id，响应相应的商品
			categoryID: function () {
				this.getData();
				this.search = "";
			},
			// 监听路由变化，更新路由传递了搜索条件
			$route: function (val) {
				if (val.path == "/goods") {
					if (val.query.search != undefined) {
						this.activeName = "-1";
						this.currentPage = 1;
						this.total = 0;
						this.search = val.query.search;
					}
				}
			}
		},
		methods: {
			// 返回顶部
			backtop() {
				const timer = setInterval(function () {
					const top = document.documentElement.scrollTop || document.body.scrollTop;
					const speed = Math.floor(-top / 5);
					document.documentElement.scrollTop = document.body.scrollTop =
						top + speed;
					
					if (top === 0) {
						clearInterval(timer);
					}
				}, 20);
			},
			// 页码变化调用currentChange方法
			currentChange(currentPage) {
				this.currentPage = currentPage;
				if (this.search != "") {
					this.getProductBySearch();
				} else {
					this.getData();
				}
				this.backtop();
			},
			getCategory23(){
				this.$axios
					.get("/product/category/selectAllCategory23", {})
					.then(res => {
						if(res.data.code===0){
							this.menuDataTest=res.data.data;
						}
					})
					.catch(err => {
					return Promise.reject(err);
				});
			},
			// 向后端请求分类列表数据
			getCategory() {
				this.$axios
					.get("/product/category/selectAllCategory3", {})
					.then(res => {
						const val = {
							id: 0,
							name: "全部"
						};
						const cate = res.data.data;
						cate.unshift(val);
						this.categoryList = cate;
					})
					.catch(err => {
						return Promise.reject(err);
					});
			},
			// 向后端请求全部商品或分类商品数据
			getData() {
				// 如果分类列表为空则请求全部商品数据，否则请求分类商品数据
				const api = '/product/list'
				this.$axios
					.get(api, {
						params: {
							category3Id: this.categoryID[0],
							page: this.currentPage,
							limit: this.pageSize
						}
					})
					.then(res => {
						this.product = res.data.data.records;
						this.total = res.data.data.total;
					})
					.catch(err => {
						return Promise.reject(err);
					});
			},
			// 通过搜索条件向后端请求商品数据
			getProductBySearch() {
				this.$axios
					.post("/product/getProductBySearch", {
						search: this.search,
						currentPage: this.currentPage,
						pageSize: this.pageSize
					})
					.then(res => {
						this.product = res.data.Product;
						this.total = res.data.total;
					})
					.catch(err => {
						return Promise.reject(err);
					});
			},
			// 鼠标移入
			showSubmenu(item, index) {
				const _this = this;
				clearTimeout(_this.menuTimer)
				if (item.columns && item.columns.length > 0) {
					_debounce(function () {
						_this.activeSubmenu = index;
						_this.showSubMenu = true
					}, 200);
				}
				
			},
			
			// 鼠标移出
			hideSubmenu(index) {
				const _this = this;
				if (_this.activeSubmenu === index) {
					_this.menuTimer = setTimeout(() => {
						_this.activeSubmenu = null;
						_this.showSubMenu = false
					}, 200)
				}
			},
		}
	};
</script>

<style scoped>
	.el-button + .el-button {
		margin-left: 8px;
	}
	
	.goods {
		background-color: #f5f5f5;
	}
	
	/* 面包屑CSS */
	.el-tabs--card .el-tabs__header {
		border-bottom: none;
	}
	
	.goods .breadcrumb {
		height: 50px;
		background-color: white;
	}
	
	.goods .breadcrumb .el-breadcrumb {
		width: 1225px;
		line-height: 30px;
		font-size: 16px;
		margin: 0 auto;
	}
	
	/* 面包屑CSS END */
	
	/* 分类标签CSS */
	.goods .nav {
		background-color: white;
	}
	
	.goods .nav .product-nav {
		width: 1225px;
		height: 40px;
		line-height: 40px;
		margin: 0 auto;
	}
	
	.nav .product-nav .title {
		width: 50px;
		font-size: 16px;
		font-weight: 700;
		float: left;
	}
	
	/* 分类标签CSS END */
	
	/* 主要内容区CSS */
	.goods .main {
		margin: 0 auto;
		max-width: 1225px;
	}
	
	.goods .main .list {
		min-height: 650px;
		padding-top: 14.5px;
		margin-left: -13.7px;
		overflow: auto;
	}
	
	.goods .main .pagination {
		height: 50px;
		text-align: center;
	}
	
	.goods .main .none-product {
		color: #333;
		margin-left: 13.7px;
	}
	
	/* 主要内容区CSS END */
</style>
